<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>使用正则表达式验证注册页面</title>
	<link rel="stylesheet" href="css/register.css">
</head>

<body>
	<section id="register">
		<div><img src="images/logo.jpg" alt="logo" /><img src="images/banner.jpg" alt="banner" /></div>
		<h1 class="hr_1">新用户注册</h1>
		<form action="" method="post" name="myform">
			<dl>
				<dt>用户名：</dt>
				<dd><input id="user" type="text" />
					<div id="user_prompt">用户名由英文字母和数字组成的4-16位字符，以字母开头</div>
				</dd>
			</dl>
			<dl>
				<dt>密码：</dt>
				<dd><input id="pwd" type="password" />
					<div id="pwd_prompt">密码由英文字母和数字组成的4-10位字符</div>
				</dd>
			</dl>
			<dl>
				<dt>确认密码：</dt>
				<dd><input id="repwd" type="password" />
					<div id="repwd_prompt"></div>
				</dd>
			</dl>
			<dl>
				<dt>电子邮箱：</dt>
				<dd><input id="email" type="text" />
					<div id="email_prompt"></div>
				</dd>
			</dl>
			<dl>
				<dt>手机号码：</dt>
				<dd><input id="mobile" type="text" />
					<div id="mobile_prompt"></div>
				</dd>
			</dl>
			<dl>
				<dt>生日：</dt>
				<dd><input id="birth" type="text" />
					<div id="birth_prompt"></div>
				</dd>
			</dl>
			<dl>
				<dt>&nbsp;</dt>
				<dd><input name="" type="image" src="images/register.jpg" class="btn" /></dd>
			</dl>
		</form>
	</section>
	<script src="./js/jquery-1.12.4.js"></script>
	<script>
		$("#user").blur(function(){
			let user = $(this).val();
			// 用户名由英文字母和数字组成的4-16位字符，以字母开头
			let reg = /^[A-Za-z]\w{3,15}$/;
			if(reg.test(user)==false){
				$("#user_prompt").html("用户名不正确，请重新输入");
				return false;

			}else{
				$("#user_prompt").html("√");
				return true;

			}
			// 密码由英文字母和数字组成的4-10位字符
			let reg1 = /^\w{4,10}$/
			// 邮箱： 11111@qq.com
			let reg2 = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/
			// 手机号
			// /^1\d{10}$/
			// 生日1900-2024===2024-10-29
			let reg3 = /^((19\d{2})|(20[0-1]\d)|(202[0-4]))-(0?[1-9]|(1[0-2]))-(0?[1-9]|[1-2]\d|3[0-1])$/
		})
	</script>
</body>

</html>